<template>
  <div class="content">
        <!-- 数据概览 -->
        <div class="flex_view">
            <div class="flex_item origin_item">
               <p class="f12">总金额/元</p>
               <p class="f24 fw600 pt10">{{filter(overviewData.orderSales)}}</p>
            </div>
            <div class="flex_item blue_item">
               <p class="f12">总吨数/吨</p>
               <p class="f24 fw600 pt10">{{filter(overviewData.orderWeight)}}</p>
            </div>
            <div class="flex_item purple_item">
               <p class="f12">采购单数量</p>
               <p class="f24 fw600 pt10">{{filter(overviewData.orderCount)}}</p>
            </div>
        </div>

        <!-- 纸厂气泡图 -->
        <div class="factory_datav_view">
            <div class="super_content">
               <div class="superli">
                 <ul>
                   <li  aos="zoom-in" @click="factoryTap(item,index)"  :key="index" v-for="(item,index) in showList" >
                      <!-- <el-popover
                        placement="right"
                        width="100%"
                        trigger="click" >
                        <div class="popoverTip">
                          <div class="tipTitle">红星纸厂</div>
                          <el-table :data="gridData" class="popoverTipTable">
                             <el-table-column width="100" property="name" ></el-table-column>
                             <el-table-column width="150" property="weight" ></el-table-column>
                          </el-table>
                        </div> -->
                        <el-button slot="reference" class="factoryBtn">
                          <div class="block pb10">{{item.orderWeight}}/吨</div>
                          <div class="block">{{item.parentName}}</div>
                        </el-button>
                      <!-- </el-popover> -->

                      <!-- <span><a>256<br />河南纸厂</a></span> -->
                   </li>
                </ul>
            </div>
          </div>

        </div>
  </div>
</template>

<script>
import untils from '@/untils/index.js'
export default {
  props: {
    overviewData: {
      type: Object,
      default: () => {
        return {orderSales: 0, orderWeight: 0, orderCount: 0}
      }
    },
    factoryData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      num: 20,
      gridData: [{
        weight: '20',
        name: '超市纸'
      }, {
        weight: '201',
        name: '废纸'
      }, {
        weight: '2016',
        name: '纸箱'
      }, {
        weight: '503',
        name: '卫生纸'
      }]
    }
  },
  computed: {
    showList: function () {
      if (this.factoryTap && this.factoryData.length > 0) {
        return this.factoryData.slice(0, 19)
      } else {
        return []
      }
    },
    randNum: function () {
      return Math.round(Math.random() * 2)
    }
  },
  methods: {
    filter (num) {
      return untils.unitConvert(num)
    },
    factoryTap (val, index) {
      console.log(val)
      console.log(index)
    }
  }
}
</script>

<style scoped>
@import url('../../../assets/style.css');
.content{
   width: 100%;
   height: 100%;
   overflow: hidden;
}
 .flex_view{
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
 }
 .flex_item{
   width: 32%;
   padding: 16px 0;
   text-align: center;
   color: white;
 }
 .flex_item p{
   margin: 0;
 }
 .origin_item{
   background:linear-gradient(0deg,rgba(254,97,20,1),rgba(251,225,4,1));
   opacity:0.8;
 }
 .blue_item{
   background:linear-gradient(0deg,rgba(0,183,159,1),rgba(10,255,205,1));
   opacity:0.8;
 }
 .purple_item{
   background:linear-gradient(-41deg,rgba(88,0,188,1),rgba(159,77,251,1));
   opacity:0.8;
 }
 .factory_datav_view{
    width: 100%;
    height: 70vh;
    background: url('../../../../static/images/bk1.png') no-repeat center 94% fixed;
    /* background-size: 100%; */
    /* background-repeat: no-repeat; */
    /* background-position: center 5vh; */
     /* background-size:cover;
    background-repeat:no-repeat; */

 }

 .popoverTip{
    width:166px;
    overflow: hidden;
    overflow-x: hidden;
    /* height:172px; */
    background:rgba(0,5,46,1);
    border:3px solid rgba(5,41,155,1);
    box-shadow:0px 30px 120px 0px rgba(0,5,25,1);
    opacity:0.9;
    border-radius:12px;
    /* color: white; */
    /* padding: 5px; */
 }
 .tipTitle{
    font-size:18px;
    font-weight:normal;
    color:rgba(4,192,226,1);
    padding: 5px;
 }
 .popoverTipTable{
   font-size: 12px;
 }
 .factoryBtn{
   width: 100%;
   height: 100%;
   border-radius: 50% !important;
   background: none;
   border: none;
   color: #00FFF5FF;
   text-align: center;
   font-size: 10px;
   overflow: hidden;
   padding: 0;
 }
 .factoryBtn::after{
   content: "";
   border: none;
   background: none;
 }
 .factoryBtn:hover{
   border: none;
   background: none;
 }

 .block{
   width: 90%;
   margin: 0 auto;
   display: block;
   text-align: center;
   overflow: hidden;
 }
 *:focus{
   outline:none;
   border: none;
 }
</style>
